<template>
  <div class="shoping-footer">
    <van-tabbar v-model="active" :fixed="false" active-color="#000">
      <van-tabbar-item :replace="false" to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.homeActivity : icon.home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :replace="false" to="/category">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.categoryActivity : icon.category" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :replace="false" to="/ranking">
        <span>排行榜</span>
        <template #icon="props">
          <img :src="props.active ? icon.rankActivity : icon.rank" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :replace="false" to="/shopingcart">
        <span>购物车</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.shopingcartActivity : icon.shopingcart"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :replace="false" to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.myActivity : icon.my" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: this.activeIndex,
      icon: {
        home: require('../../images/tabbar/home.png'),
        homeActivity: require('../../images/tabbar/home_activity.png'),
        category: require('../../images/tabbar/category.png'),
        categoryActivity: require('../../images/tabbar/category_activity.png'),
        rank: require('../../images/tabbar/rank.png'),
        rankActivity: require('../../images/tabbar/rank_activity.png'),
        shopingcart: require('../../images/tabbar/shopingcart.png'),
        shopingcartActivity: require('../../images/tabbar/shopingcart_activity.png'),
        my: require('../../images/tabbar/my.png'),
        myActivity: require('../../images/tabbar/my_activity.png'),
      },
    }
  },
  mounted() {
    // console.log(require('../../images/tabbar/home_activity.png'))
  },
}
</script>
<style lang="less" scoped>
.shoping-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}
</style>
